<template>

    <div class="app-container">
  
      <h2 style="text-align: center;">发布新课程</h2>
  
      <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息"/>
        <el-step title="创建课程大纲"/>
        <el-step title="提交审核"/>
      </el-steps>
  
      <el-form label-width="120px">
        <el-form-item label="课程标题">
          <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
        </el-form-item>
  
        <!-- 所属分类 TODO -->
        <el-form-item label="课程分类">
          <!-- 一级分类 -->
          <el-select
            v-model="courseInfo.subjectParentId"
            placeholder="一级分类"
            @change="subjectLevelOneChanged">
            <el-option
              v-for="subject in subjectOneList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"/>
          </el-select>
  
          <!-- 二级分类 -->
          <el-select
            v-model="courseInfo.subjectId"
            placeholder="二级分类"
            @change="subjectLevelTwoChanged">
            <el-option
              v-for="subject in subjectTwoList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"/>
          </el-select>
        </el-form-item>
  
        <!-- 课程讲师 TODO -->
        <!-- 课程讲师 -->
        <el-form-item label="课程讲师">
          <el-select
            v-model="courseInfo.teacherId"
            placeholder="请选择">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
          </el-select>
        </el-form-item>
  
        <el-form-item label="总课时">
          <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
        </el-form-item>
  
        <!-- 课程简介-->
        <el-form-item label="课程简介">
          <tinymce :height="300" v-model="courseInfo.description"/>
        </el-form-item>
  
        <!-- 课程封面 TODO -->
        <!-- 课程封面-->
        <el-form-item label="课程封面">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :action="BASE_API+'/eduoss/fileoss'"
            class="avatar-uploader">
            <img :src="courseInfo.cover" width="">
          </el-upload>
        </el-form-item>
  
        <el-form-item label="课程价格">
          <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
        </el-form-item>
  
        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  <script>
  import course from '@/api/edu/course'
  import subject from '@/api/edu/subject'
  import Tinymce from '@/components/Tinymce'
  export default {
    components: { Tinymce }, // 声明组件
    data() {
      return {
        saveBtnDisabled: false, // 保存按钮是否禁用
        courseInfo: {
          title: '',
          subjectId: '',
          subjectParentId: '', // 一级分类
          teacherId: '',
          lessonNum: 0,
          description: '',
          cover: '/static/defaultcover.jpg',
          price: 0
        },
        teacherList: [], // 封装所有讲师数据
        subjectOneList: [], // 封装所有一级分类课程数据
        subjectTwoList: [], // 封装该一级分类下所有的二级分类
        BASE_API: process.env.BASE_API, // 接口API地址
        courseId: '' // 课程id
      }
    },
    // 监听
    watch: {
      $route(to, from) { // 路由变化方式,只要路由发生变化,该方法就会执行
        this.init()
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        // 获取路径中的id值
        if (this.$route.params && this.$route.params.id) { // 修改操作
          this.courseId = this.$route.params.id
          // 调用根据id查询课程基本信息的方法
          this.getInfo()
        } else { // 添加操作
          // 清空表单
          this.courseInfo = {}
          // 设置默认封面
          this.courseInfo.cover = '/static/defaultcover.jpg'
  
          // 初始化所有讲师
          this.getListTeacher()
          // 初始化所有一级分类
          this.getOneSubject()
        }
      },
      // 根据课程id查询课程基本信息
      getInfo() {
        course.getCourseInfoId(this.courseId)
          .then(response => {
            this.courseInfo = response.data.courseInfoVo
            // 1.初始化一级分类和二级分类
            subject.getSubjectList()
              .then(response => {
                // 2.获取所有一级分类并赋值
                this.subjectOneList = response.data.list
                // 把所有的一级分类数组进行遍历
                for (var i = 0; i < this.subjectOneList.length; i++) {
                  // 获取数组中每个一级分类
                  var oneSubject = this.subjectOneList[i]
                  // 比较当前courseInfo里面一级分类id和所有的一级分类id
                  // eslint-disable-next-line eqeqeq
                  if (oneSubject.id == this.courseInfo.subjectParentId) {
                    // 找到相等的那一个一级分类,获取到该一级分类下的所有二级分类并赋值
                    this.subjectTwoList = oneSubject.children
                  }
                }
              })
            // 2.初始化所有讲师
            this.getListTeacher()
          })
      },
      // 上传封面成功调用的方法
      handleAvatarSuccess(response) { // response就是后端返回的数据
        this.courseInfo.cover = response.data.url
        this.$forceUpdate()
      },
      // 上传封面之前调用的方法
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      // 点击某个一级分类后,能显示该一级分类下的所有二级分类
      subjectLevelOneChanged(value) { // value是传过来的一级分类id
        // 遍历所有分类,包含一级和二级
        for (var i = 0; i < this.subjectOneList.length; i++) {
          // 遍历得到的一级分类
          var oneSubject = this.subjectOneList[i]
          // 判断遍历得到的一级分类id和我们点击的一级分类id是否一样
          // eslint-disable-next-line eqeqeq
          if (oneSubject.id == value) {
            this.subjectTwoList = oneSubject.children
          }
          // 清空二级分类的id值
          this.courseInfo.subjectId = ''
        }
      },
      // 解决渲染问题
      subjectLevelTwoChanged() {
        this.$forceUpdate()
      },
      // 查询所有的一级分类
      getOneSubject() {
        subject.getSubjectList()
          .then(response => {
            this.subjectOneList = response.data.list
          })
      },
      // 查询所有讲师
      getListTeacher() {
        course.getListTeacher()
          .then(response => {
            this.teacherList = response.data.items
          })
      },
      // 添加课程
      addCourse() {
        course.addCourseInfo(this.courseInfo)
          .then(response => {
            // 1.提示成功
            this.$message({
              type: 'success',
              message: '添加课程基本信息成功'
            })
            // 2.跳转到第二步
            this.$router.push({ path: '/course/chapter/' + response.data.courseId })
          })
      },
      // 修改课程
      updateCourse() {
        course.updateCourseInfo(this.courseInfo)
          .then(response => {
            // 1.提示成功
            this.$message({
              type: 'success',
              message: '修改课程基本信息成功'
            })
            // 2.跳转到第二步
            this.$router.push({ path: '/course/chapter/' + this.courseId })
          })
      },
      saveOrUpdate() {
        // 判断是添加操作还是修改操作
        if (!this.courseInfo.id) {
          // 添加操作
          this.addCourse()
        } else {
          // 修改操作
          this.updateCourse()
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .tinymce-container {
    line-height: 29px;
  }
  </style>
  